<template>
  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :title="isAdd ? '新增班级' : '编辑班级'" @open="openDialog" width="600px">
    <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-width="100px">
      <el-form-item label="班级名称" prop="className">
        <el-input v-model="addForm.className" placeholder="请输入班级名称"/>
      </el-form-item>
      <el-form-item label="班级课程" prop="courseId">
        <el-select v-model="addForm.courseId" filterable placeholder="选择班级课程">
          <el-option v-for="item in courses" :key="item.courseId" :label="item.courseName" :value="item.courseId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="选择老师" prop="teacherId">
        <el-select v-model="addForm.teacherId" placeholder="选择老师">
          <el-option v-for="item in teachers" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="班级类型" prop="classType">
            <el-select v-model="addForm.classType" placeholder="班级类型" style="width: 220px">
              <el-option v-for="item in courseTypes" 
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="longTermClass">
            <el-checkbox v-model="addForm.longTermClass">长期固定班级</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="班级人数" prop="capacity">
        <el-input-number v-model="addForm.capacity" :min="0" :max="100" style="width: 220px"/>
      </el-form-item>
      <el-form-item label="开班日期" prop="beginTime">
        <el-date-picker v-model="addForm.beginTime" placeholder="选择日期" type="date"/>
      </el-form-item>
      <el-form-item label="授课课时" prop="classHour">
        <el-input-number v-model="addForm.classHour" :disabled="addForm.longTermClass" placeholder="总课时（节）" style="width: 220px"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click.native="dialog = false">取消</el-button>
      <el-button :loading="addLoading" type="primary" @click.native="addSubmit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addClass } from '@/api/class'
import { listAllCourse } from '@/api/course'
export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },
    teachers: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      dialog: false,
      // 新增界面数据
      addForm: {
        classId: '',
        className: '',
        courseId: '',
        classType: 1,
        longTermClass: false,
        capacity: 1,
        beginTime: '',
        classHour: 0,
        teacherId: ''
      },
      courses: [],
      courseTypes: [
        { value: 1, label: '一对一'},
        { value: 2, label: '大班课'}
      ],
      addLoading: false,
      addFormRules: {
        className: [{ required: true, message: '请输入班级名称', trigger: 'blur' }],
        courseId: [{ required: true, message: '请选择课程', trigger: 'change' }],
        classType: [{ required: true, message: '请选择班级类型', trigger: 'change' }],
        capacity: [{ required: true, message: '请输入班级人数', trigger: 'blur' }],
        beginTime: [{ required: true, message: '请选择开班时间', trigger: 'blur' }],
        classHour: [
          { required: true, message: '请输入授课课时', trigger: 'blur' },
          { type: 'integer', min: 0, max: 500, message: '输入值必须介于0至500', trigger: 'blur'  },
        ],
        teacherId: [{ required: true, message: '请选择老师', trigger: 'change' }]
      }
    }
  },
  methods: {
    openDialog: function() {
      console.log('打开编辑班级对话框')
      this.getCourse()
    },
    getCourse() {
      const params = { status: 1 }
      listAllCourse(params).then(res => {
        this.courses = res.data
      })
    },
    addSubmit: function() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addLoading = true
          // NProgress.start()
          const para = Object.assign({}, this.addForm)
          addClass(para).then((res) => {
            this.addLoading = false
            // NProgress.done()
            this.$message({
              message: '班级创建成功',
              type: 'success'
            })
            this.$refs['addForm'].resetFields()
            this.dialog = false
            this.$parent.$parent.init()
          }).catch(err => {
            this.$notify({
              title: err.msg,
              type: 'warning',
              duration: 5000
            })
            this.addLoading = false
          })
        }
      })
    }
  }
}
</script>
